<template>
  <div class="btn">
    <!-- 面包屑-->
    <div>
      <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>司机管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加的-->
    <div class="lineHeightBtn">
<!--      <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>-->
<!--      <input-->
<!--        type="text"-->
<!--        v-model="searchValue"-->
<!--        id="chaxun_driver"-->
<!--        placeholder="请输入司机姓名或电话"-->
<!--      />-->
<!--      <el-button type="primary" @click="search">查询</el-button>-->
    <el-card style="margin: 20px 0">
      <div class="lefted">
        <el-input
            type="text"
            v-model="searchValue"
            id="chaxun_driver"
            class="search_input"
            placeholder="请输入司机姓名或电话"
        />
        <el-button type="primary" @click="search">查询</el-button>
      </div>
      <el-button
          type="primary"
          @click="dialogFormVisible = true"
          style="float: right"
          class="righted">添加</el-button>
    </el-card>

      <el-dialog
        id="tanChu_driver"
        title="添加用户"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item label="司机姓名">
            <el-input v-model="form.driverName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="form.driverPhonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.driverNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.driverIdcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="在职状态">
            <el-switch
              v-model="form.driverState"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="所在区域">
            <el-select v-model="form.driverArea" placeholder="请选择保险公司">
              <el-option label="武侯区" value="武侯区"></el-option>
              <el-option label="双流区" value="双流区"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddriver">添 加</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改的弹出框-->
    <div>
      <el-dialog title="修改用户" :visible.sync="dialogFormEditVisible">
        <el-form :model="editform">
          <el-form-item label="司机姓名">
            <el-input
              v-model="editform.driverName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="editform.driverPhonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input
              v-model="editform.driverNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="editform.driverIdcard"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="在职状态">
            <el-switch
              v-model="editform.driverState"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="所在区域">
            <el-select
              v-model="editform.driverArea"
              placeholder="请选择保险公司"
            >
              <el-option label="武侯区" value="武侯区"></el-option>
              <el-option label="双流区" value="双流区"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 列表-->
    <el-table
      id="lineHeight2"
      :data="driverData"
      border
      style="width: 100%"
      :header-cell-style="headClass"
      :cell-style="rowClass"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="driverId" label="ID">
      </el-table-column>
      <el-table-column prop="driverName" label="司机名">
      </el-table-column>
      <el-table-column prop="driverPhonenumber" label="手机号">
      </el-table-column>
      <el-table-column prop="driverState" label="在职状态">
      </el-table-column>
      <el-table-column prop="driverLasttime" label="最后登录时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="colorBtn" type="primary" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            class="colorBtn"
            type="danger"
            @click="del(scope.row.driverId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :current-page="currentPage"
      @current-change="changes"
      :total="length"
    >
      <!--:size-change="func4()"-->
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "driver", //用户管理部分
  data: function() {
    return {
      driverData: [],
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      form: {
        //数据列表
        driverId: "",
        driverName: "", //用户名
        driverPhonenumber: "", //电话
        driverNumber: "", //车牌号
        driverIdcard: "",
        driverPassword: "",
        driverState: "", //是否在职
        driverArea: "", //所在区域
        driverPhoto: "", //头像
        driverLasttime: "" //当前时间
      },
      editform: {
        //修改列表
        driverId: "",
        driverName: "", //用户名
        driverPhonenumber: "", //电话
        driverNumber: "", //车牌号
        driverIdcard: "",
        driverPassword: "",
        driverState: true, //是否在职
        driverArea: "", //所在区域
        driverPhoto: "" //头像
      },
      length: 10,
      pageID: 1, //默认是第一页开始显示列表
      currentPage: 1, //默认是第一页开始
      pageSize: 5,
      searchValue: ""
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    adddriver: function() {
      this.getTimes();
      this.$axios
        .post(this.$api.clientManage.driverManage.insert, {
          driverName: this.form.driverName, //
          driverNumber: this.form.driverNumber, //
          driverPhonenumber: this.form.driverPhonenumber, //
          driverState: this.form.driverState, //
          driverIdcard: this.form.driverIdcard, //
          driverPassword: this.form.driverPassword,
          driverphoto: this.form.driverPhoto,
          driverLasttime: this.form.driverLasttime, //
          driverArea: this.form.driverArea
        })
        .then(res => {
          //                    console.log('add_res = ',res);
          var result = res.data;
          //                    console.log('result = ',result);
          if (result.code == 0) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.dialogFormVisible = false;
            if (result.msg == "添加成功") {
              this.getList();
            }
          } else {
            this.$message({
              message: result.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getList: function() {
      this.$axios
        .post(
            this.$api.clientManage.driverManage.findByPage,
          JSON.stringify({
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          //                    console.log('GetList_res_data = ',res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;
          //                    console.log('this.length  =  ',this.length);
          //                    console.log('result = ',result.data);
          if (result.code == 0) {
            this.driverData = result.data.list;
            //                        console.log('driverData = ',this.driverData);
            for (let i = 0; i < this.driverData.length; i++) {
              if (this.driverData[i].driverState == true) {
                this.driverData[i].driverState = "在职";
              } else {
                this.driverData[i].driverState = "离职";
              }
            }
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    changes: function(val) {
      this.pageID = val;
      this.getList();
    },
    rowClass() { //表格数据居中显示
      return "text-align:center"
    },
    headClass() { //表头居中显示
      return "text-align:center"
    },
    del: function(Id) {
      //发送删除请求
      //                console.log('del_Id =  ',Id);
      this.$axios
        .post(
            this.$api.clientManage.driverManage.delete,
          JSON.stringify({
            id: Id
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          var result = res.data;
          //                    console.log('resultv = ',result);
          //                    console.log('resultvc = ',result.values.code);
          if (result.code == 0) {
            this.$alert(result.msg);
            if (result.msg == "删除成功") {
              this.getList();
            }
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    edit: function(obj) {
      //                console.log('obj = ',obj);
      this.dialogFormEditVisible = true;
      this.editform.driverId = obj.driverId; //
      this.editform.driverName = obj.driverName; //
      this.editform.driverPhonenumber = obj.driverPhonenumber; //
      this.editform.driverNumber = obj.driverNumber; //
      this.editform.driverIdcard = obj.driverIdcard; //
      this.editform.driverPhoto = obj.driverphoto; //
      this.editform.driverArea = obj.driverArea; //
      this.editform.driverState = obj.driverState; //
      this.editform.driverPassword = obj.driverPassword; //
    },
    search: function() {
      this.$axios
        .post(
            this.$api.clientManage.driverManage.find,
          JSON.stringify({
            driverName: this.searchValue,
            phoneNumber: this.searchValue,
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("SearchList_res data = ", res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;
          console.log("this.length  =  ", this.length);
          //                    console.log('result = ',result.data);
          if (result.code == 0) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.driverData = result.data.list;
            console.log("driverData = ", this.driverData);
          } else {
            this.$message({
              message: result.msg,
              type: "warning"
            });
            this.driverData = [];
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    save: function() {
      //将修改的数据直接发给服务器处理
      //                console.log('datdTransform = ',this.editform);
      this.$axios
        .post(
          this.$api.clientManage.driverManage.update,
          JSON.stringify({
            driverName: this.editform.driverName, //
            driverNumber: this.editform.driverNumber, //
            driverPhonenumber: this.editform.driverPhonenumber, //
            driverState: this.editform.driverState, //
            driverIdcard: this.editform.driverIdcard, //
            driverPassword: this.editform.driverPassword,
            driverphoto: this.editform.driverPhoto,
            driverArea: this.editform.driverArea,
            driverId: this.editform.driverId
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          var result = res.data;
          console.log("Editresult = ", result);
          if (result.code === "0") {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.getList();
            this.dialogFormEditVisible = false;
          } else {
            this.$alert("出错了");
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getTimes: function time() {
      //获取当前的时间
      var time = new Date();
      var year = time.getFullYear();
      var mon = time.getMonth() + 1;
      var day = time.getDate();
      var hour = time.getHours();
      var min = time.getMinutes();
      var s = time.getSeconds();
      this.form.driverLasttime =
        year + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + s;
    }
  }
};
</script>

<!--<style>
.userPage .el-dialog {
  margin-top: 2vh !important;
}
</style>-->
<style scoped>
#chaxun_driver {
  height: 30px;
  line-height: 30px;
  margin: 0 20px;
  font-size: 20px;
}
#lineHeight2 {
  line-height: 50px !important;
}
.lineHeightBtn {
  text-align: left;
  line-height: 65px !important;
}
span {
  color: #ffffff !important;
}
#tanChu_driver {
  margin-top: 3vh;
}
.lefted {
  float: left;
  /*width: 391px;*/
}
/deep/ .el-card__body {
  padding: 0;
}
.righted {
  margin: 35px;
}
.search_input {
  width: 320px;
  margin: 20px 10px;
}
</style>
